<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>人体运动功能检测评估报告</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">人体运动功能检测评估报告</h2>
        <div class="panel-body">
            <label class="col-sm-1 control-label">姓名：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.userName}" class="form-control"></div>
            <label class="col-sm-1 control-label">年龄：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.age}" class="form-control"></div>
            <label class="col-sm-1 control-label">性别：</label><div class="col-sm-2"><input type="text" disabled="" th:value="${sex}" class="form-control"></div>
            <label class="col-sm-1 control-label">身高：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.height}" class="form-control"></div>
            <label class="col-sm-1 control-label">体重：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.weight}" class="form-control"></div>
            <label class="col-sm-1 control-label">鞋码：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.shoe}" class="form-control"></div>
            <label class="col-sm-1 control-label">脚长：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.foot}" class="form-control"></div>
            <label class="col-sm-1 control-label">联系方式：</label><div class="col-sm-2"><input type="text" disabled="" th:field="*{user.phonenumber}" class="form-control"></div>
            <label class="col-sm-1 control-label">病历：</label><div class="col-sm-11"><input type="text" disabled="" th:field="*{user.medical}" class="form-control"></div>
            <input id="deviceDataId" type="hidden" disabled="" th:value="*{deviceDataId}" class="form-control">
            <div class="col-sm-12">
                <canvas id='footleft' width='170' height='355' style='border:1px solid #000000;background:url(../img/foot-left.jpg);'></canvas>
                <canvas id='footright' width='170' height='355' style='border:1px solid #000000;background:url(../img/foot-right.jpg);'></canvas>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<script>
    var defaultColorStops = {
        '0.0': '#ffffff',
        '0.3': '#00ff00',
        '0.6': '#ffff00',
        '1.0': '#ff0000',
    };
    var width = 256;
    var height = 1;

    // 创建一条宽为256,高为1的像素带，颜色可自定义。
    function getColorPaint() {
        var paletteCanvas = document.createElement('canvas');
        paletteCanvas.width = width;
        paletteCanvas.height = height;
        var ctx = paletteCanvas.getContext('2d');
        var linearGradient = ctx.createLinearGradient(0, 0, width, height);
        for (var key in defaultColorStops) {
            // 绘制彩色渐变色条
            linearGradient.addColorStop(key, defaultColorStops[key]);
        }
        ctx.fillStyle = linearGradient;
        ctx.fillRect(0, 0, width, height);
        // 获取色带图像上的像素点。（像素信息为[r, g, b, a, r, g, b, a…]，数组中容纳了所有的像素点信息，每个像素点依次排列，每个像素点信息包含r、g、b、a，总共有256个r、g、b、a）
        return ctx.getImageData(0, 0, width, height).data;
    }

    function isBlank(data) {
        if (
            data == null ||
            data === 'null' ||
            data === '' ||
            data === undefined ||
            data === 'undefined' ||
            data === 'unknown'
        ) {
            return true
        } else {
            return false
        }
    }

    $.ajax({
        type: "post",
        dataType: "json",
        url: "/common/pdfimgData",
        data:{
            "deviceDataId": $("#deviceDataId").val()
        },
        success: function (res) {
            if (res.data.pointNum == 4) {
                var leftdata = [
                    {
                        x: 120, y: 120, value: res.data.data1left
                    },
                    {
                        x: 45, y: 120, value: res.data.data2left
                    },
                    {
                        x: 55, y: 210, value: res.data.data3left
                    },
                    {
                        x: 65, y: 280, value: res.data.data4left
                    }
                ];
                var rightdata = [
                    {
                        x: 50, y: 120, value: res.data.data1right
                    },
                    {
                        x: 125, y: 120, value: res.data.data2right
                    },
                    {
                        x: 115, y: 210, value: res.data.data3right
                    },
                    {
                        x: 105, y: 280, value: res.data.data4right
                    }
                ];
                createImg("footleft", leftdata);
                createImg("footright", rightdata);
            } else if (res.pointNum == 8) {
                var leftdata = [
                    {
                        x: 145, y: 45, value: res.data.data1left
                    },
                    {
                        x: 120, y: 120, value: res.data.data2left
                    },
                    {
                        x: 45, y: 120, value: res.data.data3left
                    },
                    {
                        x: 50, y: 160, value: res.data.data4left
                    },
                    {
                        x: 55, y: 210, value: res.data.data5left
                    },
                    {
                        x: 55, y: 240, value: res.data.data6left
                    },
                    {
                        x: 65, y: 280, value: res.data.data7left
                    },
                    {
                        x: 65, y: 320, value: res.data.data8left
                    }
                ];
                var rightdata = [
                    {
                        x: 25, y: 45, value: res.data.data1right
                    },
                    {
                        x: 50, y: 120, value: res.data.data2right
                    },
                    {
                        x: 125, y: 120, value: res.data.data3right
                    },
                    {
                        x: 120, y: 160, value: res.data.data4right
                    },
                    {
                        x: 115, y: 210, value: res.data.data5right
                    },
                    {
                        x: 115, y: 240, value: res.data.data6right
                    },
                    {
                        x: 105, y: 280, value: res.data.data7right
                    },
                    {
                        x: 105, y: 320, value: res.data.data8right
                    }
                ];
                createImg("footleft", leftdata);
                createImg("footright", rightdata);
            }
        }
    })

    // var xhr = new XMLHttpRequest()
    // xhr.responseType='json'
    // // 指定数据发送格式以及数据发送地址
    // xhr.open('get','http://localhost:8009/common/pdfimgData?deviceDataId=' + document.getElementById("deviceDataId").value)
    // // 设置返回的数据格式
    // xhr.responseType = 'json'
    // //设置预定义好的响应头
    // xhr.setRequestHeader('Content-Type',"application/json;charset:utf-8")
    // // 向服务器发送数据，只能是post请求往里面发，内容为字符串
    // xhr.send()
    // // 监听xhr的状态码的改变,然后进行一些操作
    // xhr.onreadystatechange= function() {
    //     if(!isBlank(xhr.response)) {
    //         var res = xhr.response.data;
    //         console.log(xhr.response.msg);
    //         document.getElementById("center").value = xhr.response.msg;
    //         if (res.pointNum == 4) {
    //             var leftdata = [
    //                 {
    //                     x: 120, y: 120, value: res.data1left
    //                 },
    //                 {
    //                     x: 45, y: 120, value: res.data2left
    //                 },
    //                 {
    //                     x: 55, y: 210, value: res.data3left
    //                 },
    //                 {
    //                     x: 65, y: 280, value: res.data4left
    //                 }
    //             ];
    //             var rightdata = [
    //                 {
    //                     x: 50, y: 120, value: res.data1right
    //                 },
    //                 {
    //                     x: 125, y: 120, value: res.data2right
    //                 },
    //                 {
    //                     x: 115, y: 210, value: res.data3right
    //                 },
    //                 {
    //                     x: 105, y: 280, value: res.data4right
    //                 }
    //             ];
    //             createImg("footleft", leftdata);
    //             createImg("footright", rightdata);
    //         } else if (res.pointNum == 8) {
    //             var leftdata = [
    //                 {
    //                     x: 145, y: 45, value: res.data1left
    //                 },
    //                 {
    //                     x: 120, y: 120, value: res.data2left
    //                 },
    //                 {
    //                     x: 45, y: 120, value: res.data3left
    //                 },
    //                 {
    //                     x: 50, y: 160, value: res.data4left
    //                 },
    //                 {
    //                     x: 55, y: 210, value: res.data5left
    //                 },
    //                 {
    //                     x: 55, y: 240, value: res.data6left
    //                 },
    //                 {
    //                     x: 65, y: 280, value: res.data7left
    //                 },
    //                 {
    //                     x: 65, y: 320, value: res.data8left
    //                 }
    //             ];
    //             var rightdata = [
    //                 {
    //                     x: 25, y: 45, value: res.data1right
    //                 },
    //                 {
    //                     x: 50, y: 120, value: res.data2right
    //                 },
    //                 {
    //                     x: 125, y: 120, value: res.data3right
    //                 },
    //                 {
    //                     x: 120, y: 160, value: res.data4right
    //                 },
    //                 {
    //                     x: 115, y: 210, value: res.data5right
    //                 },
    //                 {
    //                     x: 115, y: 240, value: res.data6right
    //                 },
    //                 {
    //                     x: 105, y: 280, value: res.data7right
    //                 },
    //                 {
    //                     x: 105, y: 320, value: res.data8right
    //                 }
    //             ];
    //             createImg("footleft", leftdata);
    //             createImg("footright", rightdata);
    //         }
    //     }
    // };

    function createImg(canvasId,data) {
        var canvas = document.getElementById(canvasId);
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, 170, 355);
        var radius = 50;
        var max = 90;
        var min = 0;
        for(var i = 0; i < data.length; i++){
            console.log(data[i])
            // 开始为每个数据点绘制圆，圆心为[x,y]，半径为radius
            context.beginPath();
            context.arc(data[i].x, data[i].y, radius, 0, 2 * Math.PI);
            context.closePath();
            // 给圆加上渐变色，圆心至边的渐变色为#000至透明
            var radialGradient = context.createRadialGradient(data[i].x, data[i].y, 0, data[i].x, data[i].y, radius);
            radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
            radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
            context.fillStyle = radialGradient;
            // 给圆加上透明度，值为globalAlpha
            var globalAlpha = (data[i].value - min) / (max - min);
            context.globalAlpha = Math.max(Math.min(globalAlpha, 1), 0);
            context.fill();
        }
        var palette = getColorPaint();
        // 再获取整张800 * 800画布上的像素信息pointImgData（含灰度渐变圆）（同样，像素信息为[r, g, b, a, r, g, b, a…]）
        var pointImg = context.getImageData(0, 0, 170, 355);
        var pointImgData = pointImg.data;
        // 获取pointImgData中每个像素点point的alpha值（范围0-255），根据获取到的alpha值，再到色带上一一对应，取色带上对应的像素点（rgb）覆盖到point上。（如当前取到的alpha值为0，则在彩色渐变色带上获取到的便是第一个像素点；若当前取到的alpha值为50，则是第50个像素点。）
        for (var i = 3; i < pointImgData.length; i += 4) {
            var alpha = pointImgData[i];
            var offset = alpha * 4;
            pointImgData[i - 3] = palette[offset];
            pointImgData[i - 2] = palette[offset + 1];
            pointImgData[i - 1] = palette[offset + 2];
        }
        context.putImageData(pointImg, 0, 0);
    }
</script>
</body>
</html>
